import React from 'react'
import './index.scss'

export default function MyFooter({ list, checkAll }) {
  // 点击商品选中/取消, 让app组件中的list改变, 向下流动 更新footer组件, 组件函数重新执行, isCheckedAll就需要重新计算
  //父组件状态变  单项数据流影响组件  组件重新渲染  重新调用函数
  const isCheckedAll = list.every((item) => item.goods_state)

  // 计算总价格和总数量
  // 选中商品的总数量
  const totalCount = list
    .filter((item) => item.goods_state)
    .reduce((sum, item) => sum + item.goods_count, 0)
  // 选中商品的总价格
  const totalPrice = list
    .filter((item) => item.goods_state)
    .reduce((sum, item) => sum + item.goods_price * item.goods_count, 0)

  return (
    <div className="my-footer">
      <div className="custom-control custom-checkbox">
        <input
          type="checkbox"
          className="custom-control-input"
          id="footerCheck"
          checked={isCheckedAll}
          onChange={() => checkAll(!isCheckedAll)}
        />
        <label className="custom-control-label" htmlFor="footerCheck">
          全选
        </label>
      </div>

      <div className="">
        <span>合计:</span>
        <span className="price">¥ {totalPrice.toFixed(2)}</span>
      </div>

      <button type="button" className="footer-btn btn btn-primary">
        结算: ({totalCount})
      </button>
    </div>
  )
}
